<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店商家端</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f7f9fc;
        }
        .announcement-bar {
            background-color: #28a745;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .user-info,
        .hotel-info {
            padding: 10px;
            background: white;
            margin: 10px;
            border-radius: 5px;
            border: 1px solid #dcdfe6;
        }
        .container {
            display: flex;
            justify-content: space-between;
        }
        .room-management,
        .order-management {
            border: 1px solid #dcdfe6;
            border-radius: 5px;
            padding: 20px;
            background-color: white;
            margin: 10px;
        }
        .modal-body img {
            max-width: 100%;
            height: auto;
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div id="app">
    <div class="announcement-bar">
        <h4>欢迎酒店管理员登录！请管理您的酒店信息。</h4>
    </div>

    <div class="container">
        <div class="user-info" style="flex: 1; margin-right: 10px;">
            <h5>商户信息</h5>
            <p>管理者姓名: <span id="admin-name">李四</span></p>
            <p>酒店名称: <span id="hotel-name">酒店A</span></p>
        </div>
    </div>

    <div class="room-management">
        <h5>房间管理</h5>
        <table class="table">
            <thead>
            <tr>
                <th>房间编号</th>
                <th>房型</th>
                <th>价格</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="room in rooms" :key="room.id">
                <td>{{ room.id }}</td>
                <td>{{ room.type }}</td>
                <td>¥{{ room.price }}</td>
                <td>{{ room.status }}</td>
                <td><button class="btn btn-danger" @click="deleteRoom(room.id)">删除</button></td>
            </tr>
            </tbody>
        </table>
        <button class="btn btn-primary" @click="showAddRoomModal">添加房间</button>
    </div>

    <div class="order-management">
        <h5>订单管理</h5>
        <table class="table">
            <thead>
            <tr>
                <th>订单编号</th>
                <th>顾客姓名</th>
                <th>房型</th>
                <th>入住日期</th>
                <th>状态</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>001</td>
                <td>张三</td>
                <td>双人间</td>
                <td>2023-10-01</td>
                <td>已完成</td>
            </tr>
            <tr>
                <td>002</td>
                <td>王五</td>
                <td>单人间</td>
                <td>2023-10-05</td>
                <td>进行中</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 添加房间模态框 -->
    <div class="modal fade" id="addRoomModal" tabindex="-1" aria-labelledby="addRoomModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRoomModalLabel">添加房间</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="resetForm">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="addRoom">
                        <div class="form-group">
                            <label for="roomType">房型</label>
                            <input type="text" v-model="newRoom.type" class="form-control" required placeholder="请输入房型">
                        </div>
                        <div class="form-group">
                            <label for="roomPrice">价格</label>
                            <input type="number" v-model="newRoom.price" class="form-control" required placeholder="请输入价格">
                        </div>
                        <div class="form-group">
                            <label for="roomImage">上传图片</label>
                            <input type="file" @change="onFileChange" class="form-control-file" accept="image/*" required>
                            <img v-if="newRoom.imageUrl" :src="newRoom.imageUrl" alt="房间图片预览" />
                        </div>
                        <button type="submit" class="btn btn-success">确认添加</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                rooms: [
                    { id: 101, type: '单人间', price: 500, status: '可用' },
                    { id: 102, type: '双人间', price: 800, status: '已预定' },
                ],
                newRoom: {
                    type: '',
                    price: '',
                    imageUrl: '',
                },
            };
        },
        methods: {
            showAddRoomModal() {
                $('#addRoomModal').modal('show');
            },
            resetForm() {
                this.newRoom = { type: '', price: '', imageUrl: '' };
            },
            addRoom() {
                const newId = this.rooms.length ? Math.max(this.rooms.map(room => room.id)) + 1 : 101;
                this.rooms.push({ id: newId, ...this.newRoom, status: '可用' });
                this.resetForm();
                $('#addRoomModal').modal('hide');
            },
            deleteRoom(id) {
                this.rooms = this.rooms.filter(room => room.id !== id);
            },
            onFileChange(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.newRoom.imageUrl = e.target.result;
                };
                reader.readAsDataURL(file);
            },
        },
    });
</script>

</body>
</html>
